React-native - Beginnen

Stappenplan

1. React Native installeren
   1. Getting Started, en kies Building Projects with Native Code.
   2. Os Windows, target Android:
      1. Node installeren (zonder Chocolatey), minimum Node 8.3.
      2. Installeer Java SE Development Kit (JDK) De Java JDK installeren.

      3. The React Native CLI activeren:
         npm install -g react-native-cli

      4. Volg de instructies om de Android ontwikkelingsomgeving te installeren.
         1. Hef eventueel de beperking op om alleen app's vanuit de Windows Store te installeren.
         2. Importeer geen instellingen vanuit een vorige installatie.
      5. Een React Native app maken.
      6. Een Android toestel gereed maken.
      7. Bij de SDK Components Setup vink je Adroid SDK Platform en Android Virtual Device aan.
   3. Visual Code
      1. Installeren
      2. Extensies
         1. Esben Petersen, Prettier - Code formatter, 31-1-2019
         2. Dirk Baeumer, ESLint, documentatie ESLint (geeft problemen, nog niet opgelost)
      3. Rare foutmeldingen negeren:

         

2. Iconbestanden maken voor iOS en Android: Icon Set Creator
3. Xavier Lefèvre, Add custom icons to your React Native application, Feb 8, 2017
4. Running On Simulator iOS
5. Op een toestel runnen:
   1. apple id beheren
   2. Running On Device iOS

6. Saurabh Mhatre, Reading data from json files in react native, Jan 12, 2017

7. AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. AsyncStorage wordt niet meer gebruikt. Nu wordt aangeraden om het volgende te gebruiken: react-native-community/react-native-async-storage.

8. react-native-keychain

9. Krunal, JSON Server in React Native, Aug 23, 2018

10. Netwerken (xmlhttprequest)

    1. Networking React Native

Elementen

1. Wern Ancheta, Get Started With React Native Layouts, 26 Oct 2016

   Je leer je hoe je React Native-apps kunt indelen en hoe je lay-outs kunt implementeren die vaak in apps worden gebruikt. Dit omvat de stapplelay-out, gridlay-out en absolute lay-out. Je leert vooral hoe React-Native flexbox geïmplementeerd heeft.
2. De React Native Button is zeer beperkt wat lay-out mogelijkheden, zie daarvoor Button. Het Button element beschikt niet over een style prop, en je kan de tekst op de knop niet instellen via de "web-way" zoals <Button>Verzenden</Button> maar via de title eigenschap <Button title="Verzenden" />
   Om meer controle te hebben over de lay-out gebruik je beter één van de TouchableXXXX componenten, bijvoorbeeld TouchableOpacity Deze zijn zeer gemakkelijk te gebruiken.
3. Navigatie
   1. Packages installeren: React Navigation Getting started
   2. Hello React Navigation
   3. Parameters doorgeven, navigator props genoemd. We hebben 1 index-procedure component. De procedures die getoond worden geven we als een lijst mee:

      const AppNavigator = createStackNavigator(
        {
          //First entry by default be our first screen if we do not define initialRouteName
          HomeIndex: {
            screen: IndexProcedure,
            params: { index: homeIndexProcedureData }
          },
          FireIndex: {
            screen: IndexProcedure,
            params: { index: fireIndexProcedureData }
          },
          AccidentIndex: {
              screen: IndexProcedure,
              params: {index: accidentIndexProcedureData}
          },
          TerrorIndex: {
              screen: IndexProcedure,
              params: {index: terrorIndexProcedureData}
          },
          PsychoSocialRiskIndex: {
              screen: IndexProcedure,
              params: {index: psychoSocialRiskIndexProcedureData}
          }
        },
        {
          initialRouteName: "HomeIndex"
        }
      );

   4. Parameters in het target scherm ophalen:

      class IndexProcedure extends Component {
        render() {
          /* 2. Get the param, provide a fallback value if not available */
          const { navigation } = this.props;
          const index = navigation.getParam("index", "NO-CODE");
          return (
            <View style={homeStyle.container}>
              <ScrollView>
                {index.map(procedure => (
                  <TouchableOpacity
      
      

   5. withNavigation

      withNavigation is a higher order component which passes the navigation prop into a wrapped component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.
      withNavigation(Component) returns a Component.

4. ScrollView
   1. React Native - ScrollView Tutorials Point

   2. ReactNative ScrollView will not scroll to the bottom

5. Lists
   1. Krunal, React Native FlatList Example, Aug 23, 2018
6. Login
   1. Instamobile, Login Screen React Native
7. Ouder en kindercomponenten
   1. Per definitie is state niet toegankelijk van buiten de component. En het is niet aan te bevelen props naar state te kopiëren.
      In de boomstructuur van uw componen moet je het geselecteerde item als state instellen in de bovenliggende component (niet in de component zelf).
      En geef de geselecteerde ID door aan elke component als een prop
      In de child render kun je zoiets doen:br/> let itemIsSelected = (this.props.itemId == this.props.selectedId);
      En geef een methode door van boven naar onder, en voeg dat toe als:
      onClick = {() => this.props.setSelected (this.props.itemId)}
      In de officiële documenten Thinking in React is er een goede uitleg over hoe je componenten structureert. Dit kan handig zijn om te bepalen of iets state of props moet zijn, of dat dingen beter kunnen worden beheerd binnen het kind of de ouder.
8. Telefoneren

   1. Tiaan du Plessis, react-native-phone-call, oktober 2018

   2. Snehal Agrawal, Example to Make a Phone Call in React Native App, September 12, 2018
9. SMS
   1. Example to Send Text SMS on Button Click in React Native

10. HTTP Requests

11. Geolocation

    1. Spencer Carli, React Native Basics: Geolocation, Jan 18, 2017
12. De app runnen op een device/store
13. Abhimuralidharan, What is a provisioning profile & code signing in iOS?, Apr 10, 2018